<template>
    <div style="padding:20px 20px 20px 20px;background:#fff;">
      <el-table :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%"
        row-key="id" border lazy :load="load" 
        :tree-props="{children: 'son', hasChildren: 'hasChildren'}" id="exportTable">
      <el-table-column prop="name" label="客户名称" align="center" width="200">
        <template slot-scope="scope">
              <a @click="detail(scope.row.id)" style="color:#1a8dff;font-size: 15px;">{{
                  scope.row.name
                }}</a>
        </template>
      </el-table-column>
      <el-table-column prop="cate_name" label="客户分类" align="center" width="100"></el-table-column>
      <el-table-column prop="phone" align="center" label="客户电话" width="140"></el-table-column>
      <el-table-column prop="totalMoney" align="center" label="合同总额" width="120"></el-table-column>
      <el-table-column prop="takeOk" align="center" label="已送货" width="120"></el-table-column>
      <el-table-column prop="takeNo" align="center" label="未送货" width="120"></el-table-column>
      <el-table-column prop="payOk" align="center" label="已收款" width="120"></el-table-column>
      <el-table-column prop="payNo" align="center" label="未收款" width="120"></el-table-column>
      <el-table-column
            fixed="right"
            label="操作"
            width="140" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item smallinit" effect="dark" content="新建销售单"  placement="top-start">
              <el-button size="small" type="success" icon="el-icon-shopping-cart-full" 
              @click="go('/user/sale',scope.row.id)"></el-button>
            </el-tooltip>
            <!--<el-tooltip class="item init" effect="dark" content="发货" placement="top-start">
              <el-button size="small" type="warning" icon="el-icon-coin" @click="order(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item init" effect="dark" content="收款" placement="top-start">
              <el-button size="small" type="primary" icon="el-icon-upload" @click="order(scope.row)"></el-button>
            </el-tooltip>-->
            <el-tooltip class="item smallinit" effect="dark" content="对账" placement="top-start">
              <el-button size="small" type="warning" icon="el-icon-s-data" @click="order(scope.row)"></el-button>
            </el-tooltip>
            <el-button @click="edit(scope.row)" class="smallinit" type="primary" icon="el-icon-edit" size="small"></el-button>
            <el-popconfirm title="确定要取消当前销售单吗" @confirm="del(scope.row.id,scope)">
                <el-button type="danger" size="small" class="smallinit" icon="el-icon-delete" slot="reference"
                ></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
        
    </el-table>
    <el-pagination
      class="fen"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      :page-sizes="[5, 10, 20, 50]"      
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.length">
      </el-pagination>
</div>
</template>
<script>
export default {
  name: 'goodsTable',
  props:['list'],
  data(){
      return {
          currentPage:1, //初始页
          pagesize:10, //每页的数据
          show_page:true,
          nowpage:1,
          maxpage:10,
          imgUrl:this.url
      }
  },
  methods: {
    handleSizeChange: function (size) {
        this.pagesize = size;
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
    },
    changeLeft($event){
        $event.currentTarget.className="active";
    },
    removeLeft($event){
        $event.currentTarget.className ="tdclass";
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve()
      }, 1000)
    },
    edit:function(item){
      this.$emit("func",{'key':'editShow','item':item})
    },
    del:function(id,scope){
      var index = scope.$index
      var that = this
      this.$del('user/del',{id:id}).then((res) => {
        if(res.code == 1){
            that.$message.success(res.msg);
            that.list.splice(index,1)
        }else{
          that.$message.error(res.msg);
        }
      })
    },
    detail:function(id){
      console.log(id)
    },
    go:function(url,id){
      this.$router.push({path :url,query:{id:id}})
    }
  },
  created: function() {
    
  }
};
</script>
<style>
.fen{text-align:center;}
.el-button+.el-button {
    margin-left: 3px !important;
}
.smallinit {
    padding: 2px 4px !important;
}
</style>